<template>
  <div class="data-collection-task-card">
    <div class="header" @click.stop="closeCard">
      <span class="title">{{ title }}</span>
    </div>
    <div class="line12" v-if="dataNum == 1">
      <div class="total-task">
        <span class="label">{{ data1.labelName }}</span>
        <span
          id="1"
          class="value"
          @click="dialogOpen($event, data1.labelName)"
          >{{ data1.labelValue }}</span
        >
      </div>
    </div>
    <div class="line12" v-if="dataNum == 2">
      <div class="total-task">
        <span class="label">{{ data1.labelName }}</span>
        <span
          id="1"
          class="value"
          @click="dialogOpen($event, data1.labelName)"
          >{{ data1.labelValue }}</span
        >
      </div>
      <div class="total-task">
        <span class="label">{{ data2.labelName }}</span>
        <span
          id="2"
          class="value"
          @click="dialogOpen($event, data2.labelName)"
          >{{ data2.labelValue }}</span
        >
      </div>
    </div>
    <div class="line3" v-if="dataNum == 3">
      <div>
        <div class="line3-1">
          <div class="total-task">
            <span class="label">{{ data1.labelName }}</span>
            <span class="value" v-if="typeof data1.labelValue != 'object'">{{
              data1.labelValue
            }}</span>
          </div>
        </div>
        <div class="line3-2">
          <div class="total-task">
            <span class="label">{{ data2.labelName }}</span>
            <span class="value">{{ data2.labelValue }}</span>
          </div>
          <div class="total-task">
            <span class="label">{{ data3.labelName }}</span>
            <span class="value">{{ data3.labelValue }}</span>
          </div>
        </div>
        <div></div>
      </div>
    </div>
    <div v-if="dataNum == 4">
      <div class="line345">
        <div class="total-task">
          <span class="label">{{ data1.labelName }}</span>
          <span class="value">{{ data1.labelValue }}</span>
        </div>
        <div class="total-task">
          <span class="label">{{ data2.labelName }}</span>
          <span class="value">{{ data2.labelValue }}</span>
        </div>
        <div class="total-task">
          <span class="label">{{ data3.labelName }}</span>
          <span class="value">{{ data3.labelValue }}</span>
        </div>
        <div class="total-task">
          <span class="label">{{ data4.labelName }}</span>
          <span class="value">{{ data4.labelValue }}</span>
        </div>
      </div>
    </div>
    <div v-if="dataNum == 5" class="main-content">
      <div class="total-task">
        <span class="label">{{ data1.labelName }}:</span>
        <span
          id="1"
          class="value"
          @click="dialogOpen($event, data1.labelName)"
          >{{ data1.labelValue }}</span
        >
      </div>
      <div class="task-status">
        <div class="status-item">
          <span class="label">{{ data2.labelName }}</span>
          <span
            id="2"
            class="value"
            @click="dialogOpen($event, data2.labelName)"
            >{{ data2.labelValue }}</span
          >
        </div>
        <div class="status-item">
          <span class="label">{{ data3.labelName }}</span>
          <span
            id="3"
            class="value"
            @click="dialogOpen($event, data3.labelName)"
            >{{ data3.labelValue }}</span
          >
        </div>
        <div class="status-item">
          <span class="label">{{ data4.labelName }}</span>
          <span
            id="4"
            class="value"
            @click="dialogOpen($event, data4.labelName)"
            >{{ data4.labelValue }}</span
          >
        </div>
        <div class="status-item">
          <span class="label">{{ data5.labelName }}</span>
          <span
            id="5"
            class="value"
            @click="dialogOpen($event, data5.labelName)"
            >{{ data5.labelValue }}</span
          >
        </div>
      </div>
    </div>
  </div>
  <Dialog
    :visible="dialogData.visible"
    :tableData="dialogData"
    @close="dialogData.visible = false"
  />
</template>

<script setup>
import { ref, defineEmits, reactive } from "vue";
import Dialog from "../Dialog/Dialog2.vue";

// 定义props接收外部传入的数据
const props = defineProps({
  title: {
    type: String,
    default: "数据采集任务",
  },
  data1: {
    type: Object,
    default: () => ({ labelName: "任务总数", labelValue: 0 }),
  },
  data2: {
    type: Object,
    default: () => ({ labelName: "正在执行", labelValue: 0 }),
  },
  data3: {
    type: Object,
    default: () => ({ labelName: "等待执行", labelValue: 0 }),
  },
  data4: {
    type: Object,
    default: () => ({ labelName: "运行成功", labelValue: 0 }),
  },
  data5: {
    type: Object,
    default: () => ({ labelName: "运行失败", labelValue: 0 }),
  },
  isClosable: {
    type: Boolean,
    default: true,
  },
  dataNum: {
    type: Number,
    default: 4,
  },
  dataType: {
    type: Number,
    default: 0,
  },
});
const dialogData = reactive({
  visible: false,
  title: "",
  url: "",
  columns: [],
});
// 定义关闭卡片的方法
const emit = defineEmits(["closeTeleport"]);
const closeCard = () => {
  if (props.isClosable) {
    // 这里可以添加向父组件传递关闭事件的逻辑，比如通过emit
    console.log("卡片已关闭");
    emit("closeModal");
  }
};
const dialogOpen = (event, title) => {
  dialogData.visible = true;
  dialogData.title = title;
  dialogData.url = dataFiflterURL(event.target.id).fathUrl;
  dialogData.columns = dataFiflterURL(event.target.id).col;

  // 定义props接收外部传入的数据
  const props = defineProps({
    title: {
      type: String,
      default: "数据采集任务",
    },
    data1: {
      type: Object,
      default: () => ({ labelName: "任务总数", labelValue: 0 }),
    },
    data2: {
      type: Object,
      default: () => ({ labelName: "正在执行", labelValue: 0 }),
    },
    data3: {
      type: Object,
      default: () => ({ labelName: "等待执行", labelValue: 0 }),
    },
    data4: {
      type: Object,
      default: () => ({ labelName: "运行成功", labelValue: 0 }),
    },
    data5: {
      type: Object,
      default: () => ({ labelName: "运行失败", labelValue: 0 }),
    },
    isClosable: {
      type: Boolean,
      default: true,
    },
    dataNum: {
      type: Number,
      default: 4,
    },
  });
  const dialogData = reactive({
    visible: false,
    title: "",
    url: "",
    columns: [],
  });
  // 定义关闭卡片的方法
  const emit = defineEmits(["closeTeleport"]);
  const closeCard = () => {
    if (props.isClosable) {
      // 这里可以添加向父组件传递关闭事件的逻辑，比如通过emit
      console.log("卡片已关闭");
      emit("closeModal");
    }
  };
  const dialogOpen = () => {
    dialogData.visible = true;
    dialogData.title = "测试";
    dialogData.url = "/zjjscApi/api/fulllifecircle/tablesCountxxMx";
    dialogData.columns = [
      {
        prop: "sourceFieldId",
        label: "编号",
        width: "80",
      },
      {
        prop: "sourceFieldNameZ",
        label: "联系人",
        width: "80",
      },
      {
        prop: "sourceTableNameZh",
        label: "企业基本信息表",
        width: "80",
      },
    ];
  };
  const dataFiflterURL = (data) => {
    console.log(">>>>>LL", data);
    let filterData = {};

    //表头全生命周期
    //轻度汇总层
    if (props.dataType == 16) {
      filterData.col = [
        {
          prop: "sourceFieldNameZ",
          label: "业务类别",
        },
        {
          prop: "sourceFieldNameZ",
          label: "业务处室",
        },
        {
          prop: "sourceFieldNameZ",
          label: "任务名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "系统名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "数据库名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "表名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "字段名",
        },
        {
          prop: "sourceFieldNameZh",
          label: "质量规则名",
        },
      ];
    }

    //贴源层到标准层，标准层到轻度汇总
    if (props.dataType == 19 || props.dataType == 20) {
      filterData.col = [
        {
          prop: "sourceFieldNameZ",
          label: "任务名称",
        },
        {
          prop: "sourceFieldNameZ",
          label: "源表名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "目标表名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "加工SQL",
        },
      ];
    }

    //贴源层到数据质量
    if (props.dataType == 25) {
      filterData.col = [
        {
          prop: "sourceFieldNameZ",
          label: "业务处室",
        },
        {
          prop: "sourceFieldNameZ",
          label: "业务名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "系统名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "数据库名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "表名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "字段名",
        },
        {
          prop: "sourceFieldNameZh",
          label: "质量规则名",
        },
      ];
    }

    //源数据到数据标准
    if (props.dataType == 23) {
      filterData.col = [
        {
          prop: "sourceFieldNameZ",
          label: "任务名称",
        },
        {
          prop: "sourceFieldNameZ",
          label: "字段英文名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "字段中文名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "检验系统名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "检验表名",
        },
        {
          prop: "sourceFieldNameZ",
          label: "检验字段名",
        },
        {
          prop: "sourceFieldNameZh",
          label: "检验结果说明",
        },
      ];
    }

    switch (data) {
      case "1":
        if (props.dataType == 4) {
          //irs编目数
          filterData.fathUrl = "/getTdataTableCatalogStatusMx";
        }
        if (props.dataType == 6) {
          //轻度汇总层
          filterData.fathUrl = "/zjjscApi/api/fulllifecircle/tablesCountxxMx";
          filterData.col = [
            {
              prop: "sourceFieldNameZ",
              label: "表类别",
            },
            {
              prop: "sourceFieldNameZ",
              label: "表名",
            },
            {
              prop: "sourceFieldNameZ",
              label: "表数量",
            },
            {
              prop: "sourceFieldNameZ",
              label: "血缘关系",
            },
          ];
        }
        if (props.dataType == 16) {
          filterData.fathUrl = "/zjjscApi/api/fulllifecircle/tablesCountxxMx";
        }

        break;
      case "2":
        if (props.dataType == 6) {
          //轻度汇总层
          filterData.fathUrl = "";
          filterData.col = [
            {
              prop: "sourceFieldNameZ",
              label: "表类别",
            },
            {
              prop: "sourceFieldNameZ",
              label: "表名称",
            },
            {
              prop: "sourceFieldNameZ",
              label: "表记录数",
            },
          ];
        }

        break;
      case "3":
        break;
      case "4":
        break;
      case "5":
        break;
      default:
        fathUrl = "";
    }
    console.log(">>>>>LLee", filterData);
    return filterData;
  };
};
</script>

<style scoped lang="scss">
.data-collection-task-card {
  /* background-color: #14263c;
  

  color: #18E1FF;
  border: 1px solid #00bfff;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 255, 0.3); */
  background-image: url("../../static/middle/modal.png");
  width: 395px;
  height: 173px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  overflow: hidden;
  color: #18e1ff;
}

.header {
  text-align: center;
  margin-top: 5px;
  min-height: 20px;
  z-index: 10;
}

.title {
  font-size: 20px;
}

.close-icon {
  font-size: 18px;
  cursor: pointer;
}

.main-content {
  display: flex;
  flex-direction: column;
}

.total-task {
  // font-size: 24px;
  /* margin-bottom: 10px; */
  text-align: center;
}

.task-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 30px;
}

.status-item {
  width: 48%;
  margin-bottom: 10px;
}

.label {
  font-size: 18px;
}

.value {
  font-size: 18px;
}
.line12 {
  // display: flex;
  // font-size: 22px;
  font-weight: bold;
  height: 100px;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  justify-content: space-evenly;
  .label {
    font-size: 22px;
  }
  .value {
    font-size: 22px;
  }
}
.line3 {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  .line3-1 {
    font-weight: bold;
    .label {
      font-size: 22px;
    }
    .value {
      font-size: 22px;
    }
  }
  .line3-2 {
    display: flex;
    justify-content: space-between;
    // flex-wrap: wrap;
    // align-items: center;
    > div {
      width: 48%;
    }
  }
}
.line345 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 100px;
  align-items: center;
  > div {
    width: 48%;
  }
}
</style>
